<template>
  <div class="roles">
    <n-card title="角色管理">
      <!-- Search Form -->
      <n-space vertical>
        <n-form inline :model="searchForm" @submit.prevent="handleSearch">
          <n-form-item label="角色名称">
            <n-input v-model:value="searchForm.name" placeholder="请输入角色名称" />
          </n-form-item>
          <n-form-item>
            <n-button type="primary" @click="handleSearch">搜索</n-button>
            <n-button @click="handleReset" class="ml-2">重置</n-button>
            <n-button type="primary" @click="handleAdd" class="ml-2">新增</n-button>
          </n-form-item>
        </n-form>

        <!-- Data Table -->
        <n-data-table
          :columns="columns"
          :data="tableData"
          :pagination="pagination"
          @update:page="handlePageChange"
        />
      </n-space>
    </n-card>

    <!-- Add/Edit Dialog -->
    <n-modal v-model:show="showModal" :title="modalTitle">
      <n-card style="width: 600px">
        <n-form
          ref="formRef"
          :model="formData"
          :rules="rules"
          label-placement="left"
          label-width="100"
        >
          <n-form-item label="角色名称" path="name">
            <n-input v-model:value="formData.name" placeholder="请输入角色名称" />
          </n-form-item>
          <n-form-item label="角色描述" path="description">
            <n-input
              v-model:value="formData.description"
              type="textarea"
              placeholder="请输入角色描述"
            />
          </n-form-item>
          <n-form-item label="权限" path="permissions">
            <n-tree-select
              v-model:value="formData.permissions"
              :options="permissionOptions"
              multiple
              placeholder="请选择权限"
            />
          </n-form-item>
        </n-form>
        <template #footer>
          <n-space justify="end">
            <n-button @click="showModal = false">取消</n-button>
            <n-button type="primary" @click="handleSubmit">确定</n-button>
          </n-space>
        </template>
      </n-card>
    </n-modal>
  </div>
</template>

<script setup>
import { ref, h } from 'vue'
import { NButton, NSpace, useMessage } from 'naive-ui'

const message = useMessage()

// Search form
const searchForm = ref({
  name: ''
})

// Table
const columns = [
  { title: '角色名称', key: 'name' },
  { title: '描述', key: 'description' },
  { title: '创建时间', key: 'createTime' },
  {
    title: '操作',
    key: 'actions',
    render: (row) => {
      return h(NSpace, null, {
        default: () => [
          h(
            NButton,
            {
              size: 'small',
              onClick: () => handleEdit(row)
            },
            { default: () => '编辑' }
          ),
          h(
            NButton,
            {
              size: 'small',
              type: 'error',
              onClick: () => handleDelete(row)
            },
            { default: () => '删除' }
          )
        ]
      })
    }
  }
]

const tableData = ref([
  {
    id: 1,
    name: '超级管理员',
    description: '系统最高权限',
    createTime: '2023-12-17'
  },
  {
    id: 2,
    name: '普通用户',
    description: '基础功能权限',
    createTime: '2023-12-17'
  }
])

const pagination = ref({
  page: 1,
  pageSize: 10,
  itemCount: 0
})

// Form
const showModal = ref(false)
const modalTitle = ref('')
const formRef = ref(null)
const formData = ref({
  name: '',
  description: '',
  permissions: []
})

const permissionOptions = [
  {
    label: '系统管理',
    key: 'system',
    children: [
      {
        label: '用户管理',
        key: 'system:user'
      },
      {
        label: '角色管理',
        key: 'system:role'
      }
    ]
  }
]

const rules = {
  name: {
    required: true,
    message: '请输入角色名称',
    trigger: 'blur'
  },
  description: {
    required: true,
    message: '请输入角色描述',
    trigger: 'blur'
  },
  permissions: {
    required: true,
    message: '请选择权限',
    trigger: 'change'
  }
}

// Methods
function handleSearch() {
  // Implement search logic
  message.success('搜索成功')
}

function handleReset() {
  searchForm.value = {
    name: ''
  }
}

function handleAdd() {
  modalTitle.value = '新增角色'
  formData.value = {
    name: '',
    description: '',
    permissions: []
  }
  showModal.value = true
}

function handleEdit(row) {
  modalTitle.value = '编辑角色'
  formData.value = { ...row }
  showModal.value = true
}

function handleDelete(row) {
  // Implement delete logic
  message.success('删除成功')
}

function handleSubmit() {
  formRef.value?.validate((errors) => {
    if (!errors) {
      // Implement save logic
      message.success('保存成功')
      showModal.value = false
    }
  })
}

function handlePageChange(page) {
  pagination.value.page = page
  // Implement page change logic
}
</script>

<style scoped>
.roles {
  padding: 16px;
}
.ml-2 {
  margin-left: 8px;
}
</style>
